<template>
	<div class="votedetail">
		<div class="title">
			{{detail.title}}
		</div>
		<div class="from">
			<span>发起人：{{detail.resource}}</span>
			<span>时间：{{detail.starttime_text}}</span>
			<span>浏览：{{detail.browse}}次</span>
		</div>
		<van-divider />
		<div class="content">
			<div class="list" v-for="(item,index) in detail.campaign" :key="index">
				<div class="imageBox" @click="showinfo(item)">
					<img :src="item.avatar_text||person" alt="">
				</div>
				<div class="info">
					<span class="name">{{item.name}}</span>
					<span class="desc">{{item.introduction}}</span>
				</div>
				<div class="tovote" @click="toupiao(item)">
					<van-icon name="good-job-o" />
					给他投票({{item.vote_numer}})
				</div>
			</div>


		</div>
		<div class="sub-button" v-if="detail.choose>0">
			已投票
		</div>

		

	</div>
</template>

<script>
	import person from "@/assets/img/person.png"
	export default {
		name: "VoteDetail",
		components: {

		},
		data() {
			return {
				person: person,
				detail: {},
				userInfo:{},
				show: false
			}
		},
		mounted() {
			this.userInfo =JSON.parse(this.$getcookie("userInfo"))
			this.getData()
		},
		methods: {
			showinfo(item) {
				this.$emit("showinfo",item,true)
			},
			getData() {
				let detailData = {
					user_id:this.userInfo.user_id,
					token: this.$getcookie("jy_token"),
					site_id: 0,
					vote_id: this.$route.query.id
				}
				this.$api.home.campaignVote(detailData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.detail = res.data
					}
			
				})
			},
			toupiao(item){
				let detailData = {
					user_id:this.userInfo.user_id,
					token: this.$getcookie("jy_token"),
					site_id: 0,
					vote_id: this.$route.query.id,
					campaign_ids: item.id
				}
				this.$api.home.campaignBet(detailData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.$toast.success(res.msg)
						this.getData()
					}else{
						this.$toast.fail(res.msg)
					}
				
				})
			}
		}


	}
</script>

<style lang="less">
	.votedetail {
		padding: 1.13rem 0.78rem;
		background: #fff;

		.title {
			font-size: 0.94rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(38, 38, 38, 1);
		}

		.from {
			font-size: 0.69rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(147, 147, 147, 1);
			margin-top: 1rem;
			display: flex;
			justify-content: space-between;
		}

		.content {
			padding: 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.list {
				width: 48%;
				margin-right: 4%;
				float: left;
				margin-bottom: 1.28rem;

				&:nth-child(2n) {
					margin-right: 0;
				}

				.imageBox {
					width: 100%;
					height: 12rem;
					background: rgba(238, 238, 238, 1);
					border-radius: 0.2rem;
					overflow: hidden;

					img {
						object-fit: cover;
						width: 100%;
					}
				}

				.info {
					margin: 0.9rem auto;
					display: flex;
					justify-content: space-around;

					.name {
						font-size: 0.81rem;
						font-family: PingFang SC;
						font-weight: bold;
						color: rgba(34, 34, 34, 1);
					}

					.desc {
						font-size: 0.75rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(86, 86, 86, 1);
					}
				}

				.tovote {
					width: 8.5rem;
					height: 2.06rem;
					background: rgba(254, 119, 0, 1);
					border-radius: 0.3rem;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 0.94rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					margin: 0 auto;
				}
			}

		}

		.sub-button {
			width: 10.38rem;
			height: 2.19rem;
			border: 1px solid rgba(220, 220, 220, 1);
			margin: 2.41rem auto;
			font-size: 0.81rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(254, 119, 0, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	
</style>
